// ignore_for_file: non_constant_identifier_names

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:verse_systems/pages/mine/mine_control.dart';
import 'package:verse_systems/res/colors.dart';
import 'package:verse_systems/res/gaps.dart';
import 'package:verse_systems/utils/image_utils.dart';
import 'package:verse_systems/widgets/drawer_appbar.dart';
import 'package:verse_systems/widgets/sp_button.dart';

class MieAVipPage extends StatefulWidget {
  const MieAVipPage({super.key});

  @override
  State<MieAVipPage> createState() => _MieAVipPageState();
}

class _MieAVipPageState extends State<MieAVipPage> {

   

  final control = Get.find<MineControl>();
  final state = Get.find<MineControl>().state;

  @override
  void initState() {
    super.initState();
    control.getVIPInfo();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colours.system_background_color,
        body: GetBuilder<MineControl>(
            init: control,
            builder: (_) {
              return SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Stack(
                  children: [_confirmUs, _confirmContent],
                ),
              );
            }));
  }

  Widget get _confirmContent {
    return SizedBox(
      child: SingleChildScrollView(
      // physics: const NeverScrollableScrollPhysics(),
      child: Column(
        children: [
          DrawerAppbar(
            backgroundColor: Colors.transparent,
            color: Colours.app_main_color,
            title: "repayment".tr,
          ),
          _confirmTitle,
          _confirmContainer,
          _agreementPressed,
          _agreement,
          _confirmPressed,
          _mine_vip_icon
        ],
      ),
    ));
  }

  Widget get _mine_vip_icon {
    return Container(
      margin: EdgeInsets.fromLTRB(30.w, 15.w, 30.w, 70.w),
      child: Row(
        children: [
          Container(
            width: 132.w,
            height: 95.w,
            padding: EdgeInsets.fromLTRB(20.w, 15.w, 20.w, 10.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10.w)),
              color: Colours.app_main_color,
            ),
            child: Column(
              children: [
                Container(
                    alignment: Alignment.center,
                    width: 88.w,
                    height: 24.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(8.w),
                          topLeft: Radius.circular(8.w)),
                      color: const Color(0xFFFC5129),
                    ),
                    child: Text(
                      "active_repayment".tr,
                      style: TextStyle(
                        color: Colours.app_main_color,
                        fontSize: 14.sp,
                      ),
                    )),
                 SizedBox(height: 13.w),
                 Text(
                     "active_repayment_day".tr,
                     textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colours.app_forward_color,
                        fontSize: 11.sp,
                      ),
                    )    
              ],
            ),
          ),
          Image.asset(
          ImageUtils.getImgPath("mine_vip_icon"),
          fit: BoxFit.fill,
          width: 43.w,
          height: 26.w,
        ),
           Container(
            width: 132.w,
            height: 95.w,
            padding: EdgeInsets.fromLTRB(20.w, 15.w, 20.w, 10.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10.w)),
              color: Colours.app_main_color,
            ),
            child: Column(
              children: [
                Container(
                    alignment: Alignment.center,
                    width: 88.w,
                    height: 24.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(8.w),
                          topLeft: Radius.circular(8.w)),
                      color: const Color(0xFFFC5129),
                    ),
                    child: Text(
                      "active_repayment".tr,
                      style: TextStyle(
                        color: Colours.app_main_color,
                        fontSize: 14.sp,
                      ),
                    )),
                 SizedBox(height: 13.w),
                 Text(
                     "borrowing_terms".tr,
                     textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colours.app_forward_color,
                        fontSize: 11.sp,
                      ),
                    )    
              ],
            ),
          ),
        
        ],
      ),
    );
  }

  Widget get _agreement {
    return Container(
        margin: EdgeInsets.fromLTRB(25.w, 0, 25.w, 20.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 30.w,
              height: 30.w,
              child: Obx(() {
                return Checkbox(
                    value: state.agreementIsChecked,
                    activeColor: Colours.app_main_background_color,
                    checkColor: Colours.app_main_color,
                    hoverColor: Colours.app_main_background_color,
                    shape: const CircleBorder(),
                    onChanged: (v) {
                      if (v == true) {}
                      state.agreementIsChecked = v ?? true;
                    });
              }),
            ),
            Gaps.hGap4,
            RichText(
                text: TextSpan(children: [
              TextSpan(
                text: 'agree_sign_loan_agreements'.tr,
                style: TextStyle(
                  color: Colours.color_99,
                  fontSize: 12.sp,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    state.agreementIsChecked = !state.agreementIsChecked;
                  },
              )
            ]))
          ],
        ));
  }

  Widget get _confirmTitle {
    return Container(
        margin: EdgeInsets.fromLTRB(0, 28.w, 0, 21.w),
        child: Column(
          children: [
            Text(
              "maximum_loan".tr,
              style: TextStyle(
                color: Colours.app_main_color,
                fontSize: 11.sp,
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(0, 4.w, 0, 12.w),
              child: Text(
                state.vipInfo!.quota.toString(),
                style: TextStyle(
                  color: Colours.app_main_color,
                  fontSize: 42.sp,
                ),
              ),
            ),
            Text(
              "lowest_loan".tr,
              style: TextStyle(
                color: Colours.app_main_color,
                fontSize: 11.sp,
              ),
            ),
          ],
        ));
  }

  Widget get _agreementPressed {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 50.w, 0, 10.w),
      width: 310.w,
      child: Obx(() {
        return SPButton(
          minHeight: 50.w,
          fontSize: 18.sp,
          text: "agree_apply".tr,
          textColor: Colours.app_main_color,
          backgroundColor: state.agreementIsChecked
              ? Colours.app_main_background_color
              : Colours.app_unclickable_color,
          radius: 25.w,
          onPressed: control.onTapCertification,
        );
      }),
    );
  }

  Widget get _confirmPressed {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 45.w, 0, 30.w),
      child: SizedBox(
          width: 132.w,
          child: SPButton(
            minHeight: 42.w,
            fontSize: 18.sp,
            text: "flexible_repayment".tr,
            radius: 21.w,
            textColor: Colours.app_main_color,
            backgroundColor: Colours.app_main_background_color,
            onPressed: () {},
          )),
    );
  }

  Widget get _confirmContainer {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 0, horizontal: 15.w),
      margin: EdgeInsets.symmetric(
          horizontal: (MediaQuery.of(context).size.width - 350.w) / 2,
          vertical: 5.w),
      width: 350.w,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.w)),
          color: Colours.app_main_color,
          boxShadow: [
            BoxShadow(
                color: Colours.stringAnAlphaColor("0xff000000", alpha: 0.08),
                offset: const Offset(0.0, 15.0), //阴影xy轴偏移量
                blurRadius: 25.0, //阴影模糊程度
                spreadRadius: 0.5 //阴影扩散程度
                )
          ]),
      child: Column(
        children: _payment_list,
      ),
    );
  }

  List<Widget> get _payment_list {
    return [
      {"title": "borrowing_amount".tr, "value": state.vipInfo!.amount},
      {"title": "installment_period".tr, "value": state.vipInfo!.days},
      {"title": "repayment_method".tr, "value": state.vipInfo!.repays}
    ].map((value) {
      return Column(
        children: [
          Container(
            margin: EdgeInsets.symmetric(vertical: 15.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  value["title"].toString(),
                  style: TextStyle(
                    color: Colours.app_text_color,
                    fontSize: 14.sp,
                  ),
                ),
                Row(
                  children: [
                    Text(
                      value["value"].toString().trim(),
                      style: TextStyle(
                        color: Colours.app_black_text_color,
                        fontSize: 13.sp,
                      ),
                    ),
                    Icon(
                      Icons.arrow_forward_ios_rounded,
                      color: Colours.app_line_color,
                      size: 18.w,
                    )
                  ],
                )
              ],
            ),
          ),
          Container(
            height: 1.w,
            color: Colours.app_text_line_color,
          ),
        ],
      );
    }).toList();
  }

  Widget get _confirmUs {
    return Container(
        height: 300.w,
        decoration: BoxDecoration(
          image: DecorationImage(
              image: ExactAssetImage(ImageUtils.getImgPath("loan_background")),
              fit: BoxFit.fill),
        ));
  }
}
